<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>讨论区设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20190817.1">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="/lib/layui/layui/js/common.js?v=20190726" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>

    <style>
        .mbox{
            padding: 8px;
        }
        .layui-form-item{
            width: 65%;
            margin-left: 6%;
        }
        .fenlei .layui-form-select{
            width: 40%;
        }
    </style>
</head>
<body>
<div class="mbox">
    <div style="margin-top: 20px;position: relative;" class="head">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/icon_logProfile.png" style="position: absolute;left: 22px;top:4px "><span style="margin-left: 49px;font-size: 20px;">讨论区设置</span>
    </div>

    <div style="text-align: right;"><button type="button" class="layui-btn add" style="margin-right: 20px;">新建</button></div>
    <table id="demo" lay-filter="test"></table>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="application/javascript">
        layui.use(['table','form',], function(){
            var table = layui.table;
            var form = layui.form;

            //第一个实例
            var  tableIns=table.render({
                elem: '#demo'
                ,url: 'selAll' //数据接口
                // ,page: true //开启分页
                ,cols: [[ //表头
                    {type: 'numbers', title: '序号',}
                    ,{field: 'boardName', title: '讨论区', }
                    ,{field: 'deptName', title: '开放范围', }
                    ,{field: 'needCheck', title: '审核',templet:function (d) {
                            if(d.needCheck==1){
                                return "需要审核"
                            }else{
                                return "不需审核"
                            }
                        } }
                    ,{field: 'anonymityYn', title: '发帖',templet:function (d) {
                            if(d.anonymityYn==0){
                                return "禁止匿名"
                            }else if(d.anonymityYn==1){
                                return "允许匿名"
                            }else{
                                return "允许发帖"
                            }
                        }}
                    ,{field: 'experience', title: '版主',templet:function (d) {
                            if(d.boardHosterName!=undefined){
                                return d.boardHosterName
                            }else{
                                return ''
                            }
                        }}
                    ,{title: '操作',align:'center', toolbar: '#barDemo'}
                ]]
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "data": res.obj //解析数据列表
                    };
                }
            });

            //监听工具条
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              if(layEvent === 'del'){ //删除
                    layer.confirm('确定删除该数据吗？', function(index){
                        $.post('/system/bbs/delBoard',{boardId:data.boardId},function (res) {
                           if (res.flag){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               layer.msg('删除成功',{icon:1});
                           }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                  creat(1,data)
                }
            });

            //点击新建
            $('.add').click(function () {
                creat(0)
            })
            function creat(type,obj) {
                if(type=='0'){
                    var title = '新建'
                    var url = 'addBoard'
                }else{
                    var title = '编辑'
                    var url = '/system/bbs/updateBoard'
                }
                layer.open({
                    type: 1,
                    title: title,
                    btn:['确定','取消'],
                    shade: 0.5,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['50%', '80%'],
                    content:'<form class="layui-form" id="ajaxforms" lay-filter="formsTest">' +
                            '<div class="layui-form-item" style="margin-top: 15px;">\n' +
                        '    <label class="layui-form-label"><span style="color: red; font-size: 15px;">*</span>排序号:</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <input type="text" name="boardNo" required  lay-verify="required" placeholder="请输入排序号" autocomplete="off" class="layui-input">\n' +
                        '    </div>\n' +
                        '  </div>'+
                        '<div class="layui-form-item">\n' +
                        '    <label class="layui-form-label"><span style="color: red; font-size: 15px;">*</span>讨论区名称:</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <input type="text" name="boardName" required  lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '    </div>\n' +
                        '  </div>'+
                            ' <div class="layui-form-item layui-form-text">\n' +
                        '    <label class="layui-form-label">讨论区简介:</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <textarea name="welcomeText" class="layui-textarea"></textarea>\n' +
                        '    </div>\n' +
                        '  </div>'+
                        '<div class="layui-form-item" style="width: 85%;">\n' +
                        '    <label class="layui-form-label">权限限制:</label>\n' +
                        '    <div class="layui-input-block" style="display: flex">\n' +
                            '<div style="padding: 7px 0px;">锁定</div>'+
                        '      <input type="text" name="lockDaysBefore" required style="width: 20%;" autocomplete="off" class="layui-input">\n' +
                            '<div style="padding: 7px 0px;">天前的帖子，无法编辑删除 (说明：0或空表示不锁定)</div>'+
                        '    </div>\n' +
                        '  </div>'+
                        '<div class="layui-form-item" style="width: 80%;">\n' +
                        '    <label class="layui-form-label" style="width:104px;padding: 9px 0px;"><span style="color: red; font-size: 15px;">*</span>开放范围(部门):</label>\n' +
                        '    <div class="layui-input-block" >\n' +
                        '      <textarea  type="text" name="deptId" id="department" disabled  style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                        '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="departmentAdd">添加</a>\n' +
                        ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="departmentDel">清空</a>\n'+
                        ' </div>\n' +
                        '  </div>\n' +
                        '<div class="layui-form-item" style="width: 80%;">\n' +
                        '    <label class="layui-form-label" style="width:104px;padding: 9px 0px;"><span style="color: red; font-size: 15px;">*</span>开放范围(角色):</label>\n' +
                        '    <div class="layui-input-block" >\n' +
                        '      <textarea  type="text" name="privId" id="role" disabled   style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                        '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="roleAdd">添加</a>\n' +
                        ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="roletDel">清空</a>\n'+
                        ' </div>\n' +
                        '  </div>\n' +
                        '<div class="layui-form-item" style="width: 80%;">\n' +
                        '    <label class="layui-form-label" style="width:104px;padding: 9px 0px;"><span style="color: red; font-size: 15px;">*</span>开放范围(人员):</label>\n' +
                        '    <div class="layui-input-block" >\n' +
                        '      <textarea  type="text" name="userId" id="pepole" disabled   style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                        '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="pepoleAdd">添加</a>\n' +
                        ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="pepoleDel">清空</a>\n'+
                        ' </div>\n' +
                        '  </div>\n' +
                        '<div class="layui-form-item" style="width: 80%;">\n' +
                        '    <label class="layui-form-label" style="width:100px;padding: 9px 0px;"><span style="color: red; font-size: 15px;">*</span>版主:</label>\n' +
                        '    <div class="layui-input-block" >\n' +
                        '      <textarea  type="text" name="boardHoster" id="moderator" disabled  style="height: 45px;width: 370px;text-indent:1em;border-radius: 4px;"></textarea>\n' +
                        '<a href="javascript:;" style="color:#1E9FFF;margin-left:10px" class="moderatorAdd">添加</a>\n' +
                        ' <a href="javascript:;" style="color:#1E9FFF;margin-left:5px" class="moderatorDel">清空</a>\n'+
                        ' </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">发帖设置:</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <select name="anonymityYn" lay-verify="required">\n' +
                        '        <option value="0">禁止匿名</option>\n' +
                        '        <option value="1">允许匿名</option>\n' +
                        '        <option value="2">禁止发帖</option>\n' +
                        '      </select>\n' +
                        '    </div>\n' +
                        '  </div>'+
                        '  <div class="layui-form-item" style="margin-left:3%;width:68%">\n' +
                        '    <label class="layui-form-label" style="width: 120px;padding: 9px 0px;">发帖是否需要审核:</label>\n' +
                        '    <div class="layui-input-block" style="margin-left:132px">\n' +
                        '      <select name="needCheck" lay-verify="required">\n' +
                        '        <option value="1">需要审核</option>\n' +
                        '        <option value="0">不需审核</option>\n' +
                        '      </select>\n' +
                        '    </div>\n' +
                        '  </div>'+
                        '  <div class="layui-form-item fenlei" style="width: 93%;">\n' +
                        '    <label class="layui-form-label">帖子分类:</label>\n' +
                        '    <div class="layui-input-block" style="display: flex">\n' +
                        '      <select name="category" lay-verify="required" >\n' +
                        '      </select>\n' +
                        '<input type="text" name="classificationInput" required style="margin-left:37px;width:50%" lay-verify="required" autocomplete="off" class="layui-input">'+
                        '<button type="button" class="layui-btn layui-btn-sm tieAdd" style="margin-left:8px;margin-top: 5px;">添加</button>'+
                        '<button type="button" class="layui-btn layui-btn-sm tieOn" style="margin-top: 5px;">上移</button>'+
                        '<button type="button" class="layui-btn layui-btn-sm tieDown" style="margin-top: 5px;">下移</button>'+
                        '<button type="button" class="layui-btn layui-btn-sm tieDel" style="margin-top: 5px;">删除</button>'+
                        '    </div>\n' +
                        '  </div>'+
                        '<div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">查看权限:</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="radio" name="bbsRecordSeeYn" value="0" title="所有人" checked>\n' +
                            '      <input type="radio" name="bbsRecordSeeYn" value="1" title="仅本人">\n' +
                            '    </div>\n' +
                            '  </div>'+
                        '</form>',
                    success:function(){
                        $('input[name="lockDaysBefore"]').val('0')
                        form.render();
                        //1是编辑
                        if(type=='1'){
                            form.val("formsTest", obj);

                            console.log(obj);
                            //部门
                            $('#department').val(obj.deptName);
                            $('#department').attr("deptid",obj.deptId);

                            //角色
                            $('#role').val(obj.privName);
                            $('#role').attr("userpriv",obj.privId);

                            //开放人员
                            $('#pepole').val(obj.userName);
                            $('#pepole').attr("user_id",obj.userId);

                            //版主
                            $('#moderator').val(obj.boardHosterName);
                            $('#moderator').attr("user_id",obj.boardHoster);

                            var category=obj.category.split(',')
                            var str=''
                            for(var i=0;i<category.length;i++){
                                str+='<option value="'+category[i]+'">'+category[i]+'</option>'
                            }
                            $('select[name="category"]').append(str)
                            form.render()
                        }


                        //部门的添加
                        $(".departmentAdd").on("click",function(){
                            dept_id = 'department';
                            $.popWindow("/common/selectDept");
                        });
                        //部门的删除
                        $('.departmentDel').click(function () {
                            $('#department').attr("deptid","");
                            $('#department').attr("deptno","");
                            $('#department').val("");
                        });
                        //角色的添加
                        $(".roleAdd").on("click",function(){
                            priv_id = 'role';
                            $.popWindow("/common/selectPriv");
                        });
                        //角色的删除
                        $('.roletDel').click(function () {
                            $('#role').attr("privid","");
                            $('#role').attr("userpriv","");
                            $('#role').val("");
                        });
                        //人员的添加
                        $(".pepoleAdd").on("click",function(){
                            user_id = 'pepole';
                            $.popWindow("/common/selectUser");
                        });
                        //人员的删除
                        $('.pepoleDel').click(function () {
                            $('#pepole').attr("dataid","");
                            $('#pepole').attr("user_id","");
                            $('#pepole').val("");
                        });
                        //版主的添加
                        $(".moderatorAdd").on("click",function(){
                            user_id = 'moderator';
                            $.popWindow("/common/selectUser");
                        });
                        //版主的删除
                        $('.moderatorDel').click(function () {
                            $("#moderator").val("");
                            $("#moderator").attr('username','');
                            $("#moderator").attr('dataid','');
                            $("#moderator").attr('user_id','');
                            $("#moderator").attr('userprivname','');
                        });
                        //添加
                        $('.tieAdd').click(function () {
                            var classificationInput=$('input[name="classificationInput"]').val()
                            if(classificationInput==''){
                                layer.msg('添加分类名不能为空！', {icon: 0});
                                return false
                            }
                            var str='<option value="'+classificationInput+'">'+classificationInput+'</option>'
                            $('select[name="category"]').append(str)
                            $('select[name="category"] option').attr('selected',false)
                            $('select[name="category"] option:last-child').attr("selected",true);
                            form.render()
                            $('input[name="classificationInput"]').val('')
                        })
                        //上移
                        $('.tieOn').click(function () {
                            $('select[name="category"] option:checked').prev().before($('select[name="category"] option:checked'))
                            form.render()
                        })
                        //下移
                        $('.tieDown').click(function () {
                            $('select[name="category"] option:checked').next().after($('select[name="category"] option:checked'))
                            form.render()
                        })
                        //刪除
                        $('.tieDel').click(function () {
                            $('select[name="category"] option:checked').remove()
                            form.render()
                        })

                    },
                    yes:function (index) {
                       if( $('input[name="boardNo"]').val()==''){
                           layer.msg('请填写排序号', {icon: 2});
                       }else if($('input[name="boardName"]').val()==''){
                            layer.msg('请填写讨论区名称', {icon: 2});
                       }else if($('#department').val() == "" && $('#role').val() == "" && $('#pepole').val() == ""){
                           layer.msg('请填写开放范围(部门/角色/人员)其中一个', {icon: 2});
                       }else if($('#moderator').val() == ""){
                           layer.msg('请填写版主', {icon: 2});
                       }else{
                           var s=$('#ajaxforms').serializeArray();
                           var data={}
                           $.each(s,function (key,value) {
                               data[value.name]=value.value
                           })
                           var arr = [];
                           $("select[name='category'] option").each(function (index, e) {
                               if($(e).val()!=0){
                                   arr.push($(e).val());
                               }
                           })
                           var category = arr.join();
                           data.category=category
                           data.deptId=$('[name="deptId"]').attr('deptid');
                           data.privId=$('[name="privId"]').attr('userpriv');
                           data.userId=$('[name="userId"]').attr('user_id');
                           data.boardHoster=$('[name="boardHoster"]').attr('user_id')
                           if(type==1){
                               data.boardId=obj.boardId
                           }
                           $.ajax({
                               url:url,
                               type: "post",
                               dataType: "json",
                               data:data,
                               success:function (res) {
                                   if(res.flag){
                                       if(type==1){
                                           layer.msg('修改成功',{icon:1});
                                       }else{
                                           layer.msg('新建成功',{icon:1});
                                       }
                                       layer.close(index);
                                       tableIns.reload();
                                   }
                               }
                           })
                       }
                    }
                })
            }
        });
    </script>
</body>
</html>